<template>
	<view v-if="activityobj">
		<!-- 主体 -->
		<view class="page-wheel"
			:style="{
				backgroundImage: 'url(' + imgPath + '/app/game_hotel/' + activityId + '/bg.png)',
				backgroundColor: activityobj.bjs
			}"
		>
			<view class="header">
				<!-- banner -->
				<image class="banner" mode="widthFix" :src="imgPath + '/app/game_hotel/' + activityId + '/banner.png'"></image>
				<!-- 中奖播报 -->
				<view v-if="message.length > 0" class="broadcast flex-row-center">
					<swiper class="swiper-broadcast" :autoplay="true" :interval="3000" :vertical="true"
						:disable-touch="true" :circular="true">
						<swiper-item v-for="(item, i) in message" :key="i">
							<view class="item flex-row-center">
								<view class="photo bg-cover" :style="{backgroundImage: 'url(' + item.avatar + ')'}"></view>
								<view class="text">{{item.username}}<text>抽中</text><text class="font-assist">{{item.name}}</text></view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- 转盘 -->
			<view class="wheel-box">
				<image class="wheel-bg" :src="imgPath + '/app/game_hotel/' + activityId + '/wheel.png'"></image>
				<image class="wheel-deng" :src="imgPath + '/app/game_hotel/' + activityId + '/deng.png'"
				:style="{
					transition: 'transform ' + rotateTime + 's ease-in-out',
					transform:'translateX(-50%) rotate(' + angle1 + 'deg)'
				}"
				></image>
				<image class="wheel-zhen" :src="imgPath + '/app/game_hotel/' + activityId + '/zhen.png'"
				:style="{
					transition: 'transform ' + rotateTime + 's ease-in-out',
					transform:'translateX(-50%) rotate(' + angle2 + 'deg)'
				}"
				></image>
				<image class="wheel-go" :src="imgPath + '/app/hotel/go.png'" @tap="start"></image>
			</view>
			<!-- 抽奖次数 -->
			<view class="count font13 tc">可抽奖次数：<text class="font-b">{{count}}</text></view>
			<!-- 规则 -->
			<view class="box">
				<view class="title">活动规则</view>
				<view class="content rule">
					<rich-text :nodes="activityobj.rule"></rich-text>
				</view>
			</view>
			<!-- 奖品 -->
			<view v-show="false" class="box">
				<view class="title">奖品内容</view>
				<view class="content prize">
					<view class="prize-item flex-row-between" v-for="(item, index) in activityobj.prize" :key="index">
						<view class="circle"></view>
						<view class="con">
							<view class="inner">
								<text>{{item.tip}}：</text>
								<text class="font-646464">{{item.name}}</text>
							</view>
						</view>
						<view class="number">{{item.number ? item.number : 0}}份</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 按钮组 -->
		<view class="fix-btns">
			<view class="btn" @tap="goNext('/pages/activity/common/prizeList')">我的奖品</view>
			<view class="btn" @tap="openRecord">充值记录</view>
			<view class="btn" @tap="goNext('/pages/activity/common/help?data=mode.self,id.' + activityId)">助力列表</view>
			
			<!--  #ifdef  MP-WEIXIN -->
			<button class="btn" data-button="help" open-type="share" title="分享">邀请助力</button>
			<!--  #endif -->
			<!--  #ifdef  H5 -->
			<view class="btn" @click="Ongive">邀请助力</view>
			<!--  #endif -->
		</view>
		<!-- 弹窗-充值记录 -->
		<uni-popup ref="record" type="center">
			<view class="popup-box">
				<view class="title">充值记录</view>
				<scroll-view v-if="rechargeList.length > 0" :scroll-y="true" class="content content-record">
					<block v-for="(item, index) in rechargeList" :key="index">
						<view class="line"></view>
						<view class="item flex-column-between">
							<view class="font12">消耗<text class="font-assist">{{item.money}}{{item.type}}</text>获得{{item.number}}次抽奖机会</view>
							<view class="font10 font-646464">{{item.createtime}}</view>
						</view>
					</block>
					<view class="line"></view>
				</scroll-view>
				<view v-else class="no_data">暂无记录</view>
				<view class="btn" @tap="goNext('/pages/activity/common/recharge?id=' + activityId)">去充值</view>
			</view>
		</uni-popup>
		<!-- 弹窗-次数已用完 -->
		<uni-popup ref="fail" type="center">
			<view class="popup-box">
				<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/activity/e1.png"></image>
				<view class="content content-fail tc">
					<view class="p1 font16 font-b">您的抽奖次数已用完</view>
					<view class="p2 font11">邀请好友助力获得更多抽奖次数</view>
					<view class="p2 font11">或充值抽卡次数</view>
				</view>
				<view class="btns flex-row-center">
					<view class="btn l" @tap="goNext('/pages/activity/common/recharge?id=' + activityId)">去充值</view>
					<!--  #ifdef  MP-WEIXIN -->
					<button class="btn r" data-button="help" open-type="share" title="分享">求助好友</button>
					<!--  #endif -->
					<!--  #ifdef  H5 -->
					<view class="btn r" @click="Ongive">求助好友</view>
					<!--  #endif -->
				</view>
			</view>
		</uni-popup>
		<!-- 弹窗-中奖结果 -->
		<uni-popup ref="result" type="center">
			<view v-if="isLucky" class="popup-box">
				<view class="title">恭喜您获得</view>
				<view class="content content-success tc">
					<view class="font14">{{luckyPrize.name}}</view>
					<image class="image" mode="widthFix" :src="imgPath + luckyPrize.image"></image>
				</view>
				<view class="btns flex-row-center">
					<view class="btn l" @click="start()">继续抽奖</view>
					<view class="btn r" @tap="goNext('/pages/activity/common/prizeList')">去领取</view>
				</view>
			</view>
			<view v-else class="popup-box">
				<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/activity/e1.png"></image>
				<view class="content content-fail tc">
					<view class="p1 font16 font-b">抱歉！未抽中</view>
					<view class="p2 font11">下次继续努力哦~</view>
				</view>
				<view class="btn" @click="start()">再抽一次</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgPath: this.$Config.http_static, // 图片头
				bgcolor: '#0c16cd', // 背景色
				
				activityId: '', // 活动id
				activityobj: null, // 活动详情
				message: [], // 中奖播报
				rechargeList: [], // 充值记录
				prizeList: [], // 奖项列表
				isLucky: true, // 是否抽中奖项
				luckyPrize: {}, // 抽中的奖项内容
				count: 0, // 剩余抽奖次数
				
				angle1: 0, // 灯旋转角度
				angle2: 0, // 指针旋转角度
				angle3: 0, // 谢谢参与的旋转角度
				rotating: false, // 转盘是否在旋转中
				timeInterval: 0.7, // 转盘旋转一周的时间间隔
				rotateTime: 0, // 转盘旋转的总时间
				
				timer1: null, // 抽奖次数的定时器
				timer2: null, // 转盘的定时器
				
				idInfo: {},
				userInfo: {},
				userType: 2, // 1员工，2会员
				
				// 分享参数
				share: {
					title: '',
					desc: '',
					path: '',
					imageUrl: '',
					type: true, // 是否采用其它路径
				},
				h5share: true, // 当前页面是否单独获取签名
				wxSdk: false, // H5签名是否成功（此页面用于分享）
			}
		},
		onLoad: function (options) {
			// 从缓存中拿取各种id信息
			this.idInfo = uni.getStorageSync('idInfo')
			this.userInfo = uni.getStorageSync('userInfo')
			
			let type = this.userInfo.user.group
			if (type.indexOf('员工') >= 0) {
			  this.userType = 1
			} else if (type.indexOf('会员') >= 0) {
			  this.userType = 2
			}
			
			let params = {}
			
			// 自己点击进来的
			params = options;
			
			// 分享点击进来的
			if(this.$Route.query.data){
				params = this.$base.OnWxoptions(this.$Route.query.data)
			}
			if(this.$Route.query.scene){
				params = this.$base.OnWxoptions(this.$Route.query.scene)
			}
			
			this.activityId = params.id
			
			// 活动详情
			this.$Http({
				url: 'getActivity',
				token: true,
				data: {
					activity_id: this.activityId
				},
			}).then(res => {
				if (res.code == 1) {
					let array = res.data.prize
					// 给奖品设置角度
					let number = array.length + 1; // 盘面格子数 = 奖品的数量 + 1（谢谢参与）
					let angle = 360 / (array.length + 1); // 每个格子占据的角度
					let angle_half = parseInt(parseInt(angle) / 2); // 每个格子停下的角度
					array.forEach((element, index) => {
						element.angle = angle * index + angle_half
					});
					
					this.angle3 = angle * array.length + angle_half
					this.activityobj = res.data
					this.prizeList = array
					
					// 分享数据
					let paramStr = 'Pid.' + this.idInfo.Pid + ',Fid.' + this.idInfo.Fid + ',id.' + this.activityId + ',type.wheel';
					if (this.idInfo.Cid) {
						paramStr = paramStr + ',Cid.' + this.idInfo.Cid
					}
					
					this.share.path = '/pages/activity/common/help?scene=' + paramStr
					this.share.title = res.data.help ? res.data.help.title : ''
					this.share.desc = res.data.help ? res.data.help.describe : ''
					this.share.imageUrl = res.data.help ? (this.imgPath + res.data.help.image) : ''
					
					// #ifdef H5
					if (this.wxSdk) {
						this.Onshare()
					}
					// #endif
				}
			});
			
			// #ifdef H5
			this.$wxapi.OnwxSdk().then(res => {
				this.wxSdk = res.code == 1 ? true : false
			})
			// #endif
		},
		onShow () {
			// 每5秒刷新一下抽奖次数
			this.getMessage()
			clearInterval(this.timer1)
			this.timer1 = setInterval(this.getMessage, 5000)
		},
		onHide: function () {
			// 清空定时器
			clearInterval(this.timer1)
			this.timer1 = null
			this.$refs.result.close()
		},
		onUnload: function () {
			// 清空定时器
			clearInterval(this.timer1)
			this.timer1 = null
			this.$refs.result.close()
		},
		methods: {
			// 点击开始
			start () {
				const $this = this
				this.$refs.result.close()
				this.$Http({
					url: 'luckDrawPrize',
					token: true,
					data: { activity_id: this.activityId },
				}).then(res => {
					if (res.code == 1) {
						// 中奖, 灯转1圈，指针转4圈+奖品的角度
						$this.prizeList.forEach(element => {
							if (element.id == res.data.id) {
								// 中奖了
								$this.isLucky = true
								$this.luckyPrize = element
								$this.toRotate(360 * 4 + element.angle)
							}
						});
					} else if (res.code == 0) {
						$this.isLucky = false;
						if (res.data == 4 || res.data == 5) {
							// 未中奖, 灯转1圈，指针转4圈+谢谢参与的角度
							$this.toRotate(360 * 4 + $this.angle3)
						} else if (res.data == 2) {
							// 抽奖次数已用完
							$this.$refs.fail.open()
						} else {
							uni.showToast({ title: res.msg, icon: 'none' })
						}
					}
				}).catch(() => {
					$this.rotating = false
				})
			},
			// 重置转盘
			reset () {
				this.angle1 = 0
				this.angle2 = 0
				this.rotateTime = 0
			},
			// 指针转动
			toRotate (angle) {
				let $this = this
				// 最终旋转角度
				$this.angle1 = 360
				$this.angle2 = angle
				$this.rotateTime = parseInt(angle / 360) * $this.timeInterval
				
				if ($this.rotating) return false
				$this.rotating = true
				// 指针开始转动
				let num = 0
				$this.timer2 = setInterval(()=> {
					num += 1
					$this.rotating = true
					// 指针结束转动
					if (num > $this.rotateTime) {
						clearInterval($this.timer2)
						$this.rotating = false
						
						// 提示奖品弹窗，并重置转盘
						$this.$refs.result.open()
						setTimeout(()=>{
							$this.reset()
						}, 1000)
					}
				}, 1000)
			},
			// 获取抽奖次数，和中奖播报
			getMessage() {
				this.$Http({
					url: 'getMessage',
					token: true,
					data: { activity_id: this.activityId },
				}).then(res => {
					if (res.code === 1) {
						this.count = res.data.member.prize
						this.message = res.data.log
					}
				})
			},
			// 打开充值记录
			openRecord () {
				this.$Http({
					url: 'getBuyList',
					token: true,
					load: true,
					data: {
						page: 1,
						limit: 50,
						activity_id: this.activityId
					},
				}).then(res => {
					if (res.code === 1) {
						this.rechargeList = res.data.data
						this.$refs.record.open()
					} else {
						uni.showToast({ title: res.msg, icon: 'none' })
					}
				});
			},
			//h5发送给好友
			Ongive(){
				this.$refs.fail.close();
				uni.showModal({
					title: '分享提示',
					confirmText: '我知道了',
					confirmColor: '#03004c',
					showCancel: false,
					content: '请点击右上角三个点后,发送给好友',
					success: function(res) {
					}
				});
			},
			//跳转
			goNext(url) {
				this.$refs.record.close();
				this.$refs.fail.close();
				this.$Router.push(url)
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
